import React from "react";
import { connect } from 'react-redux'
import { ListContainer, ListItem, LoadMore } from '../style'
import { v4 as uuid } from 'uuid'
import { actionCreators } from "../store";

import { Link } from "react-router-dom";

class NewsList extends React.Component {
  render() {
    return (
      <>
        <ListContainer>
          {
            this.props.articleList.map((item) => (
              <ListItem key={uuid()}>
                {
                  item.get('imgUrl') === '' ? null : (
                    <a href="/#" className="wrap-img">
                      <img src={item.get('imgUrl')} alt="" />
                    </a>
                  )
                }
                <div className="content" style={item.get('imgUrl') === '' ? null : { paddingRight: '165px' }}>
                  <Link to={"/details/" + item.get('id')} className="title">
                    {item.get('title')}
                  </Link>
                  <p className="abstract">
                    {item.get('desc')}
                  </p>
                  <div className="meta">
                    <span className="jsd-meta">
                      <i className="iconfont icon-iconset0219"></i> {item.get('jsd')}
                    </span>
                    <a className="nickname" target="_blank" href="/u/e8a904c5a7a1">{item.get('nickname')}</a>
                    <a target="_blank" href="/p/db7ff8b6a9c2#comments">
                      <i className="iconfont icon-pinglun"></i> {item.get('comments')}
                    </a>
                    <span><i className="iconfont icon-shixin"></i> {item.get('like')}</span>
                    {
                      item.get('money') ? (<span><i className="iconfont icon-dashang"></i> {item.get('money')} </span>) : null
                    }
                  </div>
                </div>
              </ListItem>
            ))
          }
          <LoadMore onClick={this.props.getMoreList}>
            <p>点击加载更多</p>
          </LoadMore>
        </ListContainer>
      </>
    )
  }

}

const mapState = (state) => ({
  articleList: state.getIn(['content', 'articleList'])
})

const mapDispatch = (dispatch) => ({
  getMoreList() {
    dispatch(actionCreators.getLoadMoreList())
  }
})

export default connect(mapState, mapDispatch)(NewsList)